<template>
	<view :class="APP_FONT_SIZE">
		<view @tap.stop="to_detail" v-if="show && closed == 0" class="explain pr"
			:style="`width: 100%; color: #323232; `">
			<swiper circular :autoplay="autoplay" :interval="interval" class="swiper" :duration="duration">
				<swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
					<view class="title" @tap.stop="toPage('/pages/notice/notice?id='+item.noticeId)">
						<view class="fs-26  over-line1" style="line-height: 36rpx;">{{item.noticeTitle}}</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="iconfont icon-shibai fs-26 btn-close" @tap.stop="close"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'explain',
		data() {
			return {
				customBar: getApp().globalData.customBar + 60 + 'px',
				info: null,
				self: '',
				content: '',
				list: '',
				show: false,
				closed: 0,
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 600
			}
		},
		methods: {
			refresh() {
				this.request({
					url: '/sysNotices/getSysNotices',
					toast:false,
				}).then(res => {
					if (res.status == 200) {
						this.list = res.data
						if (this.list.length > 0) {
							this.show = true
						}
					}
				});

			},
			close() {
				this.show = false
				this.closed = 1
			}
		}
	}
</script>

<style>
	.explain {
		background-color: #F3F3E0;
		color: #666666;
		padding: 16rpx 30rpx 16rpx 30rpx;
	}

	.swiper {
		position: relative;
		height: 36rpx;
		margin-right: 30rpx;
	}

	.btn-close {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #F3F3E0;
	}

	.title {
		display: flex;
		max-width: 90%;
		align-items: center;
		min-width: 0;
		height: 36rpx;
		line-height: 36rpx;
	}
</style>
